<template>
	<view class="wanl-page">
		<view class="wanlshop-container" :style="{
				backgroundSize : '100% auto',
				backgroundImage : 'url(' + $wanlshop.oss('/uploads/20230925/2a3dd6087512da088990820546e90ab6.png', 0, 50, 1, 'transparent', 'png') + ')'
			}">
			<!-- 导航条 -->
			<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
				<view class="cu-bar fixed" :style="{
					height: $wanlshop.wanlsys().height + 'px', 
					paddingTop: $wanlshop.wanlsys().top + 'px',
					backgroundImage : 'url(' + $wanlshop.oss('/uploads/20230925/2a3dd6087512da088990820546e90ab6.png', 414, 0, 1, 'transparent', 'png') + ')'
				}">
					<view class="action" @tap="$wanlshop.back(1)">
						<text class="wlIcon-fanhui1 text-green text-bold"></text>
					</view>
					<view class="content text-green" :style="{top: $wanlshop.wanlsys().top + 'px'}">
						积分
					</view>
					<view class="action">
						<text @tap="$wanlshop.backHome()" class="iconfont icon-ipr_shouye text-green" style="font-size: 44rpx;font-weight: bold;"></text>
					</view>
				</view>
			</view>
			
			<view class="header padding-right">
				<view class="tag text-green text-sm text-right" @tap="onScore">
					积分记录
				</view>
			</view>
			<view class="" style="padding-left: 50rpx;">
				<text style="font-size: 84rpx;" class="text-bold text-green">{{signinData.user_score}}</text>
				<text style="font-size: 38rpx;" class="text-green margin-left-xs">积分</text>
			</view>
		</view>
		
		<view class="content bg-white padding-bottom-sm shadow-warp" style="padding-top: 12rpx;">
			<view class="flex justify-between align-center padding-lr-bj">
				<view class="title text-l text-black text-bold" style="font-family: PingFang SC-Bold, PingFang SC;">每日签到</view>
				<view class="rule text-df" style="color: #888;" @tap="show = true">签到规则</view>
			</view>
			<wanl-steps :active="signinData.successions" :options="stepsOption" />
			<view class="text-center">
				<view v-if="signinData.signin"><button class="btns cu-btn bg-gray round lg text-sm text-gray">已签到</button></view>
				<view v-else><button class="btns cu-btn bg-green round lg text-sm" @tap="attendance">立即签到</button></view>
			</view>
		</view>
		
		<!-- <view class="margin-lr radius bg-white padding-bottom-sm shadow-warp" style="padding-top: 12rpx;margin-top: 20rpx;">
			<view class="flex justify-between align-center padding-lr-bj">
				<view class="title text-l text-black text-bold" style="font-family: PingFang SC-Bold, PingFang SC;">积分任务</view>
			</view>
			<view class="task">
				<view class="item">
					<view class="left">
						<image src="/static/images/user/icon/m2.png" mode="widthFix"></image>
						<text>完善个人资料</text>
					</view>
					<view class="r">+10积分</view>
				</view>
				<view class="item">
					<view class="left">
						<image src="/static/images/user/icon/m2.png" mode="widthFix"></image>
						<text>完善家庭档案</text>
					</view>
					<view class="r">+10积分</view>
				</view>
				<view class="item">
					<view class="left">
						<image src="/static/images/user/icon/m3.png" mode="widthFix"></image>
						<text>完善消息提醒</text>
					</view>
					<view class="r">+10积分</view>
				</view>
			</view>
		</view> -->
		<view class="title margin-top-lg margin-bottom-sm text-l text-bold margin-lr-lg wanl-pip">积分兑换</view>
		<block v-if="goodsData.length > 0">
			<wanl-integral :dataList="goodsData" dataType="point"/>
		</block>
		<block v-if="goodsData.length === 0">
			<wanl-empty />
		</block>
		
		<view class="edgeInsetBottom"></view> 

		<u-popup v-model="attendanceModalVisible" mode="center" :mask-close-able="false">
			<view class="popule" :style="{backgroundImage: 'url(' + $wanlshop.oss('/uploads/20230926/f5db740d7db1e27b2c206d5f474f43e5.png') + ')'}">
				<view>签到成功</view>
				<view>+{{signinData.successions}}积分</view>
			</view>
			<view class="icon"> <text class="icon-guanbi iconfont" @tap="attendanceModalVisible = false"></text> </view>
		</u-popup>
		
		<!-- 签到规则 -->
		<u-modal v-model="show" title="签到积分规则">
			<view class="slot-content">
				<view class="u-p-30">
					<u-table>
						<u-tr class="u-tr">
							<u-th class="u-th">连续签到天数</u-th>
							<u-th class="u-th">获得积分</u-th>
						</u-tr>
						<u-tr class="u-tr" v-for="(item, index) in stepsOption" :key="index">
							<u-td class="u-td">{{ '第' + item.title + '天' }}</u-td>
							<u-td class="u-td" v-text="item.desc"></u-td>
						</u-tr>
					</u-table>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			show: false,
			signinData: {},
			attendanceModalVisible: false,
			stepsOption: [
				{ title: '1', desc: '+1' },
				{ title: '2', desc: '+2' },
				{ title: '3', desc: '+3' },
				{ title: '4', desc: '+4' },
				{ title: '5', desc: '+5' },
				{ title: '6', desc: '+6' },
				{ title: '7', desc: '+7' },
				{ title: 'n', desc: '+7'}
			],
			goodsData: [], //商品列表数据
			page: 1,
			reload: false, //判断是否上拉
			last_page: 0,
			status: 'loading',
			contentText: {
				contentdown: '',
				contentrefresh: '正在加载..',
				contentnomore: '没有更多数据了'
			}
		};
	},
	onLoad(option) {
		this.loadData();
	},
	computed: {
		...mapState(['user'])
	},
	// 监听上拉
	onPullDownRefresh() {
		this.page  = 1;
		this.reload = true;
		this.loadData();
	},
	// 下拉刷新
	onReachBottom() {
		if (this.page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.contentText.contentdown = '上拉显示更多';
			this.page = this.params.page + 1; //页码+1
			this.status = 'loading';
			this.loadData();
		}
	},
	methods: {
		async loadData() {
			await uni.request({
				url: '/wanlshop/signin/getSignin',
				success: res => {
					this.signinData = res.data;
					// 进程
					this.stepsOption[0].desc = '+' + res.data.signinscore.s1;
					this.stepsOption[1].desc = '+' + res.data.signinscore.s2;
					this.stepsOption[2].desc = '+' + res.data.signinscore.s3;
					this.stepsOption[3].desc = '+' + res.data.signinscore.s4;
					this.stepsOption[4].desc = '+' + res.data.signinscore.s5;
					this.stepsOption[5].desc = '+' + res.data.signinscore.s6;
					this.stepsOption[6].desc = '+' + res.data.signinscore.s7;
					this.stepsOption[7].desc = '+' + res.data.signinscore.sn;

					this.$store.commit('user/setUserInfo', {score:res.data.user_score});
				}
			});
			await uni.request({
				url: '	/wanlshop/product/point',
				data: {
					page: this.page
				},
				success: res => {
					uni.stopPullDownRefresh();
					this.status = 'more';
					this.goodsData = this.reload ? res.data.data : this.goodsData.concat(res.data.data); //数据 追加
					this.page = res.data.current_page; //当前页码
					this.last_page = res.data.last_page; //总页码
				}
			});
		},
		// 点击签到
		async attendance() {
			await uni.request({
				url: '/wanlshop/signin/dosign',
				method: 'POST',
				success: res => {
					this.loadData();
					this.attendanceModalVisible = true;
				}
			});
		},
		timestampToTime(timestamp) {
			var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			var D = date.getDate();
			return Y + M + D;
		},
		onScore(){
			this.$wanlshop.to('/pages/user/signin/log');
		}
	}
};
</script>

<style lang="less">
.wanl-page >.content {
	margin: 0 30rpx;
	width: 690rpx;
	height: 368rpx;
	border-radius: 10rpx;
	margin-top: -280rpx;
}
.wanlshop-container {
	height: 542rpx;
}
.btns {
	width: 254rpx;
	height: 60rpx;
}
/deep/ .u-mode-center-box {
	background-color: transparent !important;
	.popule {
		width: 600rpx;
		height: 628rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		view {
			position: absolute;
			&:nth-child(1) {
				bottom: 126rpx;
				font-size: 80rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 800;
				color: #D49300;
				line-height: 112rpx;
			}
			&:nth-child(2) {
				bottom: 50rpx;
				font-size: 46rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #D1B443;
				line-height: 64rpx;
			}
		}
	}
	.icon {
		text-align: center;
		padding-top: 58rpx;
		.iconfont {
			color: #fff;
			font-size: 40rpx;
		}
	}
}
.task {
	.item {
		margin: 16rpx 20rpx 0 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left {
			image {
				width: 52rpx;
				height: 52rpx;
				margin: 10rpx;
			}
			text {
				display: inline-block;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 42rpx;
			}
		}
		.r {
			width: 144rpx;
			height: 52rpx;
			background: #E9F4EB;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #4CBD66;
			text-align: center;
			line-height: 52rpx;
		}
	}
}
.u-td {
	height: 60rpx;
}
</style>
